<template>
  <div class="container">
    <div class="login-box">
      <div class="welcome">
        <span class="title">
          欢迎来到后台管理系统
        </span>
        <div class="desc">
          <div style="width: 15vw;height: 13vw">
            <img src="../../assets/logo.png" alt="" style="width: 100%;height: 100%">
          </div>
          <div class="desc-box">
            <p class="desc-title">让后台开发更简单</p>
            <span
                class="desc-content">一个基于Go语言开发的通用后台管理系统, 只为给更多初学者提供一个更好的学习平台</span>
          </div>
        </div>
      </div>
      <div class="login-form">
          <span class="title">
          Go-Vue-Admin
        </span>
        <span
            class="login-content">A management platform using Golang and Vue </span>
        <a-form
            :model="formState"
            name="basic"
            style="width: 20vw ;margin: 0 auto;text-align: start"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
            layout="vertical"

        >
          <a-form-item
              label=""
              name="username"
              :rules="[{ required: true, message: '请输入账户!' }]"
          >
            <a-input v-model:value="formState.username" placeholder="请输入账户">
              <template #suffix>
                <UserOutlined/>

              </template>
            </a-input>
          </a-form-item>

          <a-form-item
              label=""
              name="password"
              :rules="[{ required: true, message: '请输入密码!' }]"
          >
            <a-input-password v-model:value="formState.password" placeholder="请输入密码"/>
          </a-form-item>
          <a-form-item
              label=""
              name="code"
              :rules="[{ required: true, message: '请输入验证码!' }]"
          >
           <div style="display: flex;justify-content: space-between">
             <a-input v-model:value="formState.code" placeholder="请输入验证码" style="width: 59%" />
             <div style="width: 40%;height: 3vh">
               <img @click="getCaptcha" src="https://www.mxnzp.com/api_file/verify/5/4/e/f/c/8/e/b/886778647ebb41e7887ac81b8bc94939.jpg" alt="" style="width: 100%;height: 100%">
             </div>
           </div>
          </a-form-item>
          <a-form-item label="" >
            <a-button type="primary" html-type="submit" style="width: 100%">立即登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  UserOutlined
} from '@ant-design/icons-vue';
import {reactive, ref} from "vue";
import {captcha, login} from "@/api/login.js";

const formState = reactive({
  username: '',
  password: '',
  code: '',
});
const onFinish = values => {
  console.log('Success:', values);
  submitLogin(values)
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

/**
 * 验证码
 * */
const captchaData = ref()
const getCaptcha = ()=>{
  captcha({}).then(res=>{
    captchaData.value=res
  })
}
getCaptcha()

const submitLogin=(data)=>{
  login(data).then(res=>{
    // 判断逻辑
  })
}



</script>

<style scoped>
.container {
  background-color: #ececec;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

}

.login-box {
  width: 65vw;
  height: 60vh;
  margin: calc((100vh - 60vh) / 2) auto 0; /* 计算垂直边距 */
  background-color: #ececec;
  border: .2em solid #ececec;
  border-radius: 2vh;

  box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.5),
  5px 5px 10px rgba(128, 128, 128, 0.5);
  display: flex;
}

.welcome {
  width: 60%;
  padding: 10vh 5vh 0;
  display: flex;
  border-radius: 2vh 0 0 2vh;

  flex-direction: column;
  justify-content: start;

}

.title {
  font-size: 1.5em;
  font-weight: 600;
}

.desc {
  margin-top: 5vh;
  display: flex;
  align-items: center;

}

.desc-title {
  font-size: 1.2em;
  font-weight: 600;
}

.desc-content {
  font-size: 1em;
  color: #747577;
}

.login-form {
  text-align: center;
  width: 40%;
  padding: 10vh 5vh 0;
  background-color: #f3f4f6;
  display: flex;
  flex-direction: column;
  justify-content: start;
  border-radius: 0 2vh 2vh 0;
}

.login-content {
  margin: 2vh 0;
  font-size: .9em;
  color: #747577;
}
</style>